<template>
  <div class="login">
    <!-- 面经注册 -->
    <div class="title">{{ isRegister ? "面经登录" : "面经注册" }}</div>
    <div class="content">
      <!-- 输入框 -->
      <div class="username">
        <span>用户名</span>
        <input type="text" placeholder="用户名" v-model="username" />
      </div>
      <div class="username">
        <span>密码</span
        ><input type="password" placeholder="密码" v-model="password" />
      </div>
      <button :class="isRegister ? 'actice' : ''" @click="login">
        {{ isRegister ? "登录" : "注册" }}
      </button>
      <!-- 注册账号 -->
      <div class="toLogin" @click="register">
        <span v-if="isRegister">注册账号</span>
        <span v-else>有账号，去登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HmLogin",
  data() {
    return {
      username: "",
      password: "",
      //   默认登录
      isRegister: true,
      token: "",
    };
  },
  methods: {
    register() {
      this.isRegister = !this.isRegister;
    },
    async login() {
      // 当在登录状态的时候发送登录请求
      if (this.isRegister === true) {
        const res = await axios({
          url: `http://interview-api-t.itheima.net/h5/user/login`,
          method: "POST",
          data: {
            username: this.username,
            password: this.password,
          },
        });

        if (res.data.message === "请求成功") {
          console.log("登录成功");
          this.token = res.data.data.token;
          //   console.log(res.data.data.token);
          //   console.log(this.token);
          this.$router.push({
            name: "MyLayout",
            // path: "/layout",
            // query: {
            //   token: this.token,
            // },
          });
        } else {
          console.log("登录失败，请去注册");
          this.isRegister = false;
        }
      } else {
        // 当在注册状态的时候发送注册请求
        const res = await axios({
          url: `http://interview-api-t.itheima.net/h5/user/register`,
          method: "POST",
          data: {
            username: this.username,
            password: this.password,
          },
        });
        if (res.data.message === "请求成功") {
          console.log("注册成功");
        } else {
          console.log("注册失败");
        }
        // console.log(res.data.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.login {
  height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  // 子元素针对父元素对齐
  .title {
    font-size: 16px;
    color: #323233;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #c8c2c270;
  }
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 50px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;

    .username {
      width: 100%;
      display: flex;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #cdcaca6a;
      font-size: 14px;
      color: #323233;
      position: relative;
      input {
        border: none;
        outline: none;
        background-color: transparent;
        position: absolute;
        left: 100px;
      }
      input::placeholder {
        color: #83838867;
      }
    }
    button {
      width: 100%;
      height: 40px;
      background-color: #fa6d1d;
      font-size: 14px;
      color: #fff;
      border: none;
      outline: none;
      margin-top: 20px;
      border-radius: 2px;
    }

    .actice {
      background-color: #07c160;
    }

    .toLogin {
      width: 100%;
      font-size: 12px;
      color: #5959d3;
      text-align: end;
      line-height: 40px;
    }
  }
}
</style>
